<template>
	<view class="content">
		<view class="searchs">
			<uni-datetime-picker class="datepicker" type="date" placeholder="请选择开始时间"
				:end="new Date(searchData.endCreateTime).getTime()" :clear-icon="true"
				v-model="searchData.startCreateTime" />
			<uni-datetime-picker class="datepicker" type="date" placeholder="请选择结束时间" :end="new Date().getTime()"
				:clear-icon="true" v-model="searchData.endCreateTime" />
		</view>
		<view class="search-bars">
			<uni-search-bar class="search-input" radius="5" @confirm="doSearch" @clear="doClear"
				v-model="searchData.equipCode" clearButton="auto" cancelButton="none" placeholder="请输入柜号">
			</uni-search-bar>
			<uni-icons type="search" size="32" color="#999999" @click="doSearch()"></uni-icons>
		</view>
		<view class="log-content">
			<uni-card v-for="(item,index) in logList" :key="index" :border="false" @click="goDetail(item)">
				<view class="single">
					<text>设备编码：{{item.equipCode}}</text>
				</view>
				<view class="single typeStatus">
					<text style="margin-right: 10px;">类型：{{filterType(item.type)}}</text>

					<text>状态：</text>
					<uni-tag type="primary" v-if="item.status === 1" text="发起成功" />
					<uni-tag type="error" v-else-if="item.status === 2" text="发起失败" />
					<uni-tag type="success" v-else-if="item.status == 3" text="提取成功" />
					<span v-else>{{ item.status }}</span>
				</view>
				<view class="single">

				</view>
				<view class="single created-time">
					<text>创建时间：{{item.createTime || ''}}</text>
				</view>
				<view class="single created-time">
					<text>接收时间：{{item.receiveTime || ''}}</text>
				</view>
				<uni-icons type="right" size="26" color="#C6C6C6" class="right-icon"></uni-icons>

			</uni-card>

			<view v-show="isLoadMore && logList.length >0">
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>

			<view class="nodata" v-if="logList.length == 0">
				<image class="empty_img" src="/static/images/empty.png" mode="widthFix"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	import {
		equipment
	} from "@/api/my.js";
	import {
		removeNullUndefined
	} from "@/common/index.js";
	export default {
		data() {
			return {
				logList: [],

				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				refresh: false, // 下拉刷新标示
				searchData: {
					pageNum: 1, //页码
					pageSize: 5,
					equipCode: "",
					startCreateTime: "",
					endCreateTime: "",
				},
			}
		},
		computed: {
			...mapState(['enums']),
		},
		created() {
			this.getList();
		},
		methods: {
			getList() {
				equipment('/cameraextract/list', 'post', {
						...removeNullUndefined(this.searchData)
					}).then(res => {
						if (res.code == 200) {
							let datas = res.data;
							this.logList = this.searchData.pageNum == 1 ? datas : this.logList.concat(datas);
							if (datas.length < this.searchData.pageSize) { //小于size数，停止请求
								this.isLoadMore = true;
								this.loadStatus = 'nomore';
							} else {
								this.isLoadMore = false;
							}
							uni.hideLoading();
							if (this.refresh) {
								uni.stopPullDownRefresh();
								this.refresh = false;
							}
						}
					})
					.catch(error => {
						uni.hideLoading();
						this.isLoadMore = false;
					});
			},
			filterType(type) {
				let classify = this.enums.EQUIP_CAMERA_EXTRACT_LOG_TYPE.find(
					(p) => {
						return type != null ?
							type.toString() == p.code.toString() :
							"";
					}
				);
				return classify ? classify.label : "";
			},
			doSearch() {
				this.getList();
			},
			goDetail(item) {
				let detail = JSON.stringify(item);
				uni.navigateTo({
					url: `/pagesA/my/imagExtract/detail?detail=${detail}`
				})
			},
			onPullDownRefresh() {
				this.searchData.pageNum = 1;
				this.getList();
				this.refresh = true;
			},
			onReachBottom() {
				if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
					this.isLoadMore = true;
					this.searchData.pageNum++;
					this.getList();
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/common.scss";

	.searchs {
		padding: 20rpx 20rpx 0;
		@include flexLayout(center, center);

		.datepicker {
			width: 48%;
		}

		/deep/ .uni-date:first-child {
			margin-right: 3%;
		}
	}

	.search-bars {
		@include flexLayout(center, space-between);
		padding-right: 20rpx;

		.search-input {
			width: 96%;
		}
	}

	.right-icon,
	.created-time {
		color: #999;
	}

	.right-icon {
		position: absolute;
		right: 0px;
		top: 42%;
	}

	::v-deep .uni-card {
		padding: 0 !important;
	}

	.typeStatus {
		padding: 5px 0;
	}
	.log-content{
		position: relative;
		top: -30rpx;
	}
</style>